import { createVNode, render, h } from 'vue'
import MessageBox from './indedx.vue'
import type { Params } from './messages_box'
let body: HTMLElement | null = null
let appendTo: HTMLElement | null = null
const getAppendToElement = () => {
  body = document.body
  appendTo = document.createElement('div')
  body.appendChild(appendTo)
  return appendTo
}

/**
 * @param params title(可选)：提示框标题  @title默认值：Title
 * @param params msg(可选)：提示框内容  @msg默认值：This is a message
 * @param params options(可选)：confirmButtonText: 按钮文本  @confirmButtonText默认值：确认
 * @param params options(可选)：callback：事件回调 (可选)
 * @param params slotVNode(可选)：DMO节点，可自定义要添加的HTML
 *
 */
export const showMessage = (params: Params, callback?: () => void, slotVNode?: any) => {
  const { title, msg, options } = params
  console.log(slotVNode)

  const confirm = () => {
    if (callback) {
      callback()
    }
    close()
  }
  const close = () => {
    if (body && appendTo) {
      render(null, appendTo)
      body.removeChild(appendTo)
      appendTo = null
    }
  }

  const createSlotVNode = () => {
    return h('div', { innerHTML: slotVNode })
  }

  // const vnode = createVNode(
  //   MessageBox,
  //   {
  //     title,
  //     msg,
  //     options,
  //     onConfirm: confirm,
  //     onClose: close,
  //   },
  //   {
  //     default: createSlotVNode,
  //   }
  // )

  // 经测试，vue中提供的 h 函数与 createVNode 函数功能完全一致
  // vue官网明确描述 h 函数只是 createVNode 的缩写版，多次调用便于使用，其功能完全一致，文档地址 https://cn.vuejs.org/guide/extras/render-function.html

  const vnode = h(
    MessageBox,
    {
      title,
      msg,
      options,
      onConfirm: confirm,
      onClose: close,
    },
    {
      default: createSlotVNode,
    },
  )
  render(vnode, getAppendToElement())
}
